$prefix-cls: '#{$tonyname}-context-menu';
$default-height: 44px;

@mixin item-style {
  li {
    display: inline-block;
    width: 100%;
    height: $default-height;
    margin: 0 !important;
    line-height: $default-height;

    &.is-divider {
      border-bottom: 1px solid var(--border-color, '#dedede');
    }

    &.el-sub-menu {
      .el-sub-menu {
        &__title {
          height: $default-height;
          line-height: $default-height;
        }
      }
    }

    &:not(.is-disabled):hover {
      color: var(--text-primary-color);
      background-color: #f1f2f3;
    }
  }
}

.#{$prefix-cls} {
  @include item-style();

  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  display: block;
  width: 156px;
  margin: 0;
  list-style: none;
  user-select: none;
  background-color: var(--background-primary-color);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.25rem;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.06);

  &__text {
    display: flex;
    align-items: center;

    span {
      width: auto !important;
      height: auto !important;
      font-size: 14px;
      visibility: visible !important;
    }
  }

  &__popup {
    @include item-style();

    > ul {
      padding: 0;
    }
  }
}
